<template>
	<view class="view_list">
		<view class="view_fixed">
			<view class="view_heard">
				<uni-nav-bar :statusBar="true" :fixed=true left-icon="left" right-icon="plusempty" :title="params.pageName" @clickRight="goAdd" @clickLeft="goBack"/>
			</view>
			<!-- <view class="view_search">
				<uni-search-bar v-model="params.keyword" placeholder="请输入" cancelButton="none" @confirm="search" />
			</view> -->
			<!-- <view class="view_tabs">
				<uni-segmented-control :current="params.tabIndex" :values="tabList" @clickItem="clickTab" />
			</view> -->
		</view>
		<me-scroll :top="['h5'].includes($env)?'88rpx':'166rpx'"  @getData="getData" ref="mescroll">
			<block slot="list">
				<uni-collapse class="list_content" v-if="tableData.length">
					<uni-collapse-item v-for="(item,index) in tableData" :key="index+'_'+$i18n.getLocale()" :open="true" class="list_item">
						<template v-slot:title>
							<me-section :title="item.stock_record_no" type="line" />
						</template>
						<viewItem :key="index" :pageName="params.pageName" :data="item" @initData="goReFresh"/>
					</uni-collapse-item>
				</uni-collapse>
				<!-- <view v-if="!isLoading && !tableData.length" class="list_empty">
					<me-empty :text="$t('common.listEmptyText')" :isIndex="!1" />
				</view> -->
				<me-loading ref="loading" />
			</block>
		</me-scroll>
	</view>
</template>

<script>
import viewItem from './components/list/listItem.vue'
import meScroll from '../../components/ui/me-scroll/index.vue';
import meLoading from '../../components/ui/me-loading/index.vue';
import meSection from '../../components/ui/me-section/index.vue';
import { getRecordList } from '@/api/index'

export default {
	data() {
		return {
			params:{
				keyword:'',
				tabIndex: 0
			},
			tabList:['全部','草稿','待审核','驳回','待审核1','驳回2'],
			isLoading: false,
			tableData: []
		};
	},
	components:{
		viewItem,
		meScroll,
		meLoading,
		meSection
	},
	onLoad(options) {
		this.params.type = Number(options.type || 1)
		this.params.pageName = options.pageName || (this.$t('common.record')+this.$t('common.list'))
		this.$nextTick(()=>{
			uni.setNavigationBarTitle({
				title: this.params.pageName
			});
		})
  },
	onShow() {},
	methods: {
		goBack(){
			this.$tab.navigateBack({ data: 1 })
		},
		goAdd(){
			this.$tab.navigateTo(`/pages/record/add?type=${this.params.type}&pageName=${this.params.pageName}`)
		},
		async goSearch (){
			console.log('search',this.params)
		},
		async clickTab (e){
			console.log('search',e,this.params)
			if (this.params.tabIndex != e.currentIndex) {
				this.params.tabIndex = e.currentIndex;
      }
		},
		goReFresh(){
			this.$nextTick(()=>{
				this.$refs['mescroll'].refresh()
			})
		},
		async getData (mescroll) {
			try {
				this.isLoading = true
				const fData = {
					pageSize: mescroll.size,
					page: mescroll.num,
					record_type:this.params.type
				}
				if(fData.page === 1){
					this.tableData = []
				}
				console.log('fData',fData)
				const {success,data,message} = await getRecordList(fData)
				if (!success) {
					this.$modal.showToast(message);
				}
				const lists = data && data.items ? data.items : []
				mescroll.endSuccess(lists.length);
				this.tableData = this.tableData.concat(lists);
				this.closeLoading()
			} catch (error) {
				mescroll.endErr();
        this.closeLoading()
				if (this.tableData.length === 0 && mescroll.num === 1) {
					mescroll.showEmpty();
				} 
			}
		},
		closeLoading(){
			if (this.$refs.loading){
				this.$refs.loading.hide()
			};
			this.isLoading = false
		},
	}
	// onShareAppMessage(res) {
	// 	var title = '公告';
	// 	var path = '/otherpages/notice/list/list';
	// 	return {
	// 		title: title,
	// 		path: path,
	// 		success: res => {},
	// 		fail: res => {}
	// 	};
	// }
};
</script>

<style lang="scss">
.list_empty {
	position: relative;
	top: -50%;
	padding-top: 154px;
}
.view_list {
	.view_top{
		height: 100rpx;
	}
	.view_fixed{
		position: fixed;
		left: 0;
		top: 0rpx;
		z-index: 10;
		width: 100%;
		height: auto;
		background: #fff;
    box-shadow: 0px 2rpx 10rpx rgba(193, 193, 193, 0.2);
		.view_heard{
			width: 100%;
			// height: 132rpx;
			/deep/ .uni-navbar{
				.uni-navbar--shadow{
					box-shadow: unset;
				}
			}
		}
		.view_search{
			width: 100%;
			height: 110rpx;
			border-top: 1rpx solid #dcdcdc;
			border-bottom: 1rpx solid #dcdcdc;
			display: flex;
			align-items: center;
			justify-content: space-between;
			/deep/ .uni-searchbar{
				flex: 1;
			}
		}
		.view_tabs{
			width: 100%;
			height: 110rpx;
			padding: 15rpx 20rpx 15rpx;
			/deep/ .segmented-control--button{
				.segmented-control__item{
					border-radius: 50rpx;
					border-color: transparent !important;
					.segmented-control__text{
						color: #333 !important;
					}
					&.segmented-control__item--button--active{
						border:2rpx solid rgba(41, 121, 255, 1) !important;
						background-color: rgba(41, 121, 255, 0.3) !important;
						.segmented-control__text{
							color: rgba(41, 121, 255, 1) !important;
						}
					}
				}
			}
		}
	}
	/deep/ .list_content{
		padding: 30rpx;
		padding-top: calc(30rpx + 0rpx);
		background: transparent;
		.list_item{
			border-radius: 30rpx;
			background: #fff;
			overflow: hidden;
			&+.list_item{
				margin-top: 20rpx;
			}
		}

	}
}
</style>
